<template>
	<view class="client">
		<Tabs bac="#fff" :list='list' @change="changeTabs" :current="current"></Tabs>
		<div class="filterList">
			<div class="item" @click="filterServe(item.id)" :class="{ active: filterItem == index }"
				v-for="(item, index) in filterList " :key="item.name">
				{{ $t(item.name) }}
			</div>
		</div>
		<u-empty margin-top="100" v-show="clientList.length === 0" :text="$t('列表为空')" mode="list"></u-empty>
		<div class="list">
			<div class="item" v-for="(item, index) in clientList" :key="index">
				<div class="address">
					<image src="/static/icons/address.png" alt="" />
					{{ item.city_name }}
				</div>
				<div class="content">
					<div class="left">
						<image :src="item.imgs_path[0]" alt="" />
						<div class="info">
							<div class="title">

								<div class="name"> {{ item.title }}</div>

								<div :style="{ color: item.status == 1 ? '#0089FF' : '#999999' }" class="type">{{
										item.status == 1 ?
											$t('未服务') :
											$t('已服务')
								}}</div>
							</div>
							<div class="sku">{{ item.show_str }}</div>
							<div class="price">
								<div class="about" v-if='item.type == 1'>{{ $t("约") }}</div>
								<div class="num">{{ item.price }}</div>
								<div class="units">
									<div class="m" v-if='item.type == 0'>{{ $t("元/m²") }}</div>
									<div v-else-if='item.type == 2 || 3' class="moon">{{ $t("元/月") }}</div>
								</div>
							</div>
						</div>
					</div>


				</div>

				<div class="userInfo" v-if="item.release_info">
					<div class="left">
						<image :src="item.release_info.avatar" class="icon" />
						<div class="name">{{ item.release_info.name }}</div>
					</div>
					<div class="phone">{{ item.release_info.mobile }}</div>
				</div>
				<div class="btns">
					<div class="review" v-if="item.status == '1'">
						<u-button @click="goRevise(item.id, item.type, item.name)"
							style="width:160rpx;margin:0 20rpx 0 0 ;" type="primary" plain size="medium">{{ $t("修改") }}
						</u-button>
						<u-button @click="submit(item.id)" style="width:160rpx;margin:0 20rpx 0 0 ;" type="primary"
							size="medium">{{$t("提交审核")}}</u-button>
					</div>
					<div class="review">
						<u-button @click="upOrDown(item.id)" v-if="item.status == '2'"
							style="width:160rpx;margin:0 20rpx 0 0 ;" plain
							:type="item.active === 0 ? 'primary' : 'error'" size="medium">{{ item.active
									=== 0 ? '上架' : '下架'
							}}</u-button>
						<u-button v-if="item.status == '4'" :disabled="true"
							style="width:160rpx;margin:0 20rpx 0 0 ;background:  #b7b5b5;color: #fff;" plain
							size="medium">{{ $t("审核失败") }}</u-button>
						<u-button v-if="item.status == '3'" type="success" :disabled="true"
							style="width:160rpx;margin:0 20rpx 0 0 ;background:  #b7b5b5;color: #fff;" plain
							size="medium">{{ $t("审核通过") }}</u-button>
						<u-button v-if="item.status == '5'" type="warning" :disabled="true"
							style="width:160rpx;margin:0 20rpx 0 0 ;background:  #b7b5b5;color: #fff;" plain
							size="medium">{{ $t("已售出") }}</u-button>
					</div>

				</div>
			</div>
		</div>
	</view>
</template>

<script>
import Tabs from '@/components/Tabs'
export default {
	components: {
		Tabs
	},
	data() {
		return {
			clientList: [],
			current: 0, //tabs当前选中
			filterItem: 0,
			form: {
				id: "1",
				type: "0",//0=二手房，1=新房，2=租房，3=土地转让
				from: "2", //	1=会员，2=业务员
				status: ''//状态值，默认不传返回全部，1=未服务，2=已服务
			},
			list: [
				{
					id: 1,
					name: '二手房'
				},
				{
					id: 2,
					name: '新房'
				},
				{
					id: 3,
					name: '租房'
				},
				{
					id: 4,
					name: '土地转让'
				},
			],
			filterList: [
				{
					id: '',
					name: '全部',

				},
				{
					id: '1',
					name: '未服务',


				},
				{
					id: '2',
					name: '已服务',

				}
			],

		}
	},
	onLoad() {
		this.getList()
	},
	methods: {
		getList() {
			this.$u.api.self_release(this.form).then(res => {
				console.log(res);
				this.clientList = res.data.data.data
			})
		},

		filterServe(index) {
			this.filterItem = this.form.status = index
			this.getList()
		},
		// 上下架
		upOrDown(id) {
			this.$u.api.active({ id }).then(res => {
				console.log(res);
				if (res.code === 1) {
					this.getList()
				}
			})
		},
		submit(id) {
			this.$u.api.submit_review({ id }).then(res => {
				console.log(res);
				if (res.code === 1) {
					this.getList()
				}
			})
		},

		// 更改tabs
		changeTabs(index) {
			this.filterItem = 0
			this.form.status = ''
			this.current = this.form.type = index
			this.form.id = index + 1
			this.getList()
		},
		goRevise(id, type, name) {
			this.$u.route('/pages/client/revise', {
				id,
				type,
				name
			})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .uni-page-head {
	background: url("~@/static/icons/bac3.png") no-repeat;
	background-size: 100%;
}

.client {
	padding: 10rpx 20rpx;
	margin: 0 20rpx 20rpx;
	background: #ffffff;
	border: 2rpx solid #ebf6ff;
	border-radius: 20rpx 20rpx 0 0;
}

.filterList {
	@include flex;
	margin-top: 20rpx;

	.item {
		margin-right: 14rpx;
		@include flex($aligin: center, $justify: center);
		padding: 0 20rpx;
		height: 52rpx;
		background: #f8f8f8;
		border: 2rpx solid rgba(183, 181, 181, 0.18);
		border-radius: 27rpx;
		color: #666666;
		font-size: 26rpx;
	}

	.active {
		background: rgba(179, 138, 56, 0.08);
		border: 2rpx solid #b38a38;
		color: #B38A38;
	}
}

.list {
	margin-top: 20rpx;

	.item {
		margin-bottom: 20rpx;

		padding: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.07);

		.address {
			@include flex($aligin: center);
			margin-bottom: 20rpx;
			padding: 16rpx 0 16rpx 32rpx;
			background: #f8f8f8;
			border-radius: 12rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 22rpx;
			}
		}

		.content {
			@include flex($aligin: space-between);
			padding-bottom: 24rpx;
			border-bottom: 2rpx solid #f8f8f8;

			.left {
				@include flex($aligin:center);

				flex: 1;

				image {
					width: 152rpx;
					height: 152rpx;
					border-radius: 20rpx;
					@include text-overflow;
				}

				.info {
					flex: 1;
					margin-left: 24rpx;

					.title {

						@include flex($justify: space-between, $aligin: center);
						margin-top: 10rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;

						.name {
							@include text-overflow;
							width: 360rpx;
						}

					}

					.sku {
						margin: 12rpx 0 14rpx;
						font-size: 24rpx;
						color: #999999;
					}

					.price {
						@include flex($aligin: center);
						color: #fd4834;
						font-size: 26rpx;

						.num {
							font-weight: bold;
							font-size: 32rpx;
						}
					}
				}
			}

			.type {
				font-size: 26rpx;
			}
		}

		.userInfo {
			@include flex($aligin: center, $justify: space-between);
			margin-top: 10rpx;
			color: #666666;
			font-size: 26rpx;

			.left {
				@include flex($aligin: center);

				image {
					width: 54rpx;
					height: 52rpx;
					border-radius: 50%;
				}

				.name {
					margin-left: 20rpx;
				}

			}

			.phone {
				color: #999999;
			}
		}
	}
}

.btns {
	margin-top: 30rpx;

	.review {
		@include flex;
		justify-content: flex-end;

	}
}
</style>
